<template>
    <div class="vote app_content">
        <div class="warp_body">
            <!-- 中间 -->
            <div class="carousel_box">
                <carousel-card></carousel-card>
            </div>
            <div class="tabCon mescroll mescroll-bar">
                <!-- 主活动 -->
                <section class="box">
                    <div class="topheader region">
                        <div class="biaoti_ranking"><van-notice-bar color="#fff" background="none" scrollable :text="`${data.det.subjectNo}号${data.det.subjectName}:${data.det.subjectSummay}`" />
<!--                            {{ data.det.subjectNo }}号{{ data.det.subjectName }}:{{data.det.subjectSummay}}-->
                        </div>
                        <div class="vote_info">
                            <div>
                                <span>{{ data.det.currentSort }}</span>
                                <div>当前排名</div>
                            </div>
                            <div>
                                <span>{{ data.det.voteNumber }}</span>
                                <div>当前投票数</div>
                            </div>
                            <div>
                                <span>{{ data.det.diffPreviousVote }}</span>
                                <div>距离前一名</div>
                            </div>
                        </div>
                        <p
                            class="titme_box flex_y_center"
                            style="color: rgb(52, 52, 52);"
                            v-if="endTime > 0"
                        >
                            <i
                                class="Ticonfont iconH5_shouye_huodongxinxi_shijian"
                                style="color: rgb(0, 0, 0);"
                            ></i
                            >结束倒计时
                            <van-count-down :time="endTime" format="DD 天 HH 时 mm 分 ss 秒" />
                        </p>
                        <p v-else class="titme_box flex_y_center" style="color: rgb(52, 52, 52)">
                            活动结束
                        </p>
                        <div class="icon_rb"></div>
                    </div>
                </section>

                <section class="box">
                    <div class="outline_box">
                        <div class="player_images region">
                            <img :src="data.det.subjectImgLink" alt="">
                             <div class="introduction flex_y_center">
                                 <div class="flex_grow_1">{{data.det.subjectDetail}}</div>
                             </div>
<!--                            <div class="toupiaocheer color-btn"><img src="~@/assets/img/icon-toupiao.png" alt=""> 投票</div>-->
                            <div class="details_bottom flex_between">
                                <!-- <div class="a   color-btn" style="border: 1px solid rgb(49, 202, 177);"><img src="~@/assets/img/icon-shengcheng.png" alt="">
                            生成海报</div> -->
                                <div class="a color-btn" @click="handleGoHome"><i class="Ticonfont iconH5_sousuoye_anniutubiao_fanhui"></i> 返回首页</div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>

            <!-- 底部 -->
            <div class="footer_body">
                <footer-nav></footer-nav>
            </div>
        </div>
    </div>
</template>

<script setup>
import {showNotify} from "vant";
import dayjs from "dayjs";

const { useHome } = $globalStore;
const router = useRouter();
import { onActivated, onDeactivated } from 'vue'

// 请求结果
const data = reactive({
    activity: {},
    list: [],
    det: {}
});

// 获取
const getActivity = async () => {
    const res = await useHome.getActivity();
    if(res.success) {
        data.activity = res.body;
    }
}
getActivity();

const endTime = computed(function () {
    const { endTime } = data.activity;
    if (!endTime) {
        return null;
    }
    const end = dayjs(endTime).valueOf();
    return end - dayjs().valueOf();
});
const addView = async (id) => {
    await useHome.addView({ id });
}

function handleGoHome() {
    router.push({
        name: "Vote",
    });
}
const getDetailSubject = async (id) => {
    const res = await useHome.getDetailSubject({ id });
    if(res.success) {
        data.det = res.body;
        await addView(id);
    } else {
        showNotify({ type: 'warning', message: res.message });
        handleGoHome();
    }
}
function handleGetDetail() {
    const { id } = router?.currentRoute?.value?.query;
    if(!id) {
        showNotify({ type: 'danger', message: '参数错误' });
        handleGoHome();
    } else {
        getDetailSubject(id);
    }
}
onActivated(() => {
    // 调用时机为首次挂载
    // 以及每次从缓存中被重新插入时
    handleGetDetail();
})

onDeactivated(() => {
    // 在从 DOM 上移除、进入缓存
    // 以及组件卸载时调用
    data.det = {}
})
// onMounted(() => {
//     $globalConfigure(() => {
//         const { id } = router?.currentRoute?.value?.query;
//         if(!id) {
//             showNotify({ type: 'danger', message: '参数错误' });
//             handleGoHome();
//         } else {
//             getDetailSubject(id);
//         }
//     }, data);
// });
</script>

<style lang="less" scoped>
.vote {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background-color: #f4f4f4;

    .warp_body {
        .carousel_box {
            // height: 150px;
            width: 100%;
            padding-bottom: 10px;
        }
    }

    .boutique_box {
        .boutique_body {
            padding: 0px 0px 10px 0px;
        }
    }

    //.recommend_box {
    //    .recommend_body {
    //        width: 100%;
    //    }
    //}
}
.shuoming_con {
    padding: 0.24rem;
    font-size: 0.3rem;
    border-radius: 0 0 0.16rem 0.16rem;
    box-shadow: 0 0.04rem 0 0 rgba(0, 0, 0, 0.25);
    margin-bottom: 1rem;
}
.topheader .player_name {
    padding: 0.24rem 0.24rem 0;
    line-height: 0.5rem;
    font-size: 0.36rem;
    font-weight: normal;
    white-space: nowrap;
    /*  overflow:hidden;
      text-overflow: ellipsis;*/
}
.topheader .jianjienr {
    padding: 0.16rem 0.24rem 0.24rem;
    font-size: .26rem;
    line-height: 0.36rem;
    word-break: break-all;
}
.player_images {
    ext-align: center;
    width: 100%;
    margin: 0rem auto;
    background-color: #ffffff;
    padding: 0.24rem;
    box-sizing: border-box;
    margin-top: 0.24rem;
    img {
    margin: 0 auto 0.24rem auto;
    border-radius: 0;
        width: 60%;
}}
.play_box {
    width: 0.48rem;
    height: 0.48rem;
    margin-left: 0.24rem;
}
.music_box .Ticonfont {
    font-size: 0.32rem;
}
.jindu {
    padding: 0 0.24rem;
}
.zong_time, .play_time {
    color: #fff;
    font-size: 0.28rem;
}
.block {
    width: 70%;
}
.introduction {
    width: 98%;
    font-size: 0.28rem;
    color: #333;
    margin-bottom: 0.24rem;
}
.el-slider__runway {
    height: 0.08rem;
    background-color: rgba(255, 255, 255, 0.3);
}
.el-slider__bar {
    height: 0.08rem;
    background-color: #fff;
}
.el-slider__button {
    width: 0.24rem;
    height: 0.24rem;
    box-shadow: 0 0.08rem 0.08rem 0 rgba(0, 0, 0, 0.25);
}
.el-slider__button-wrapper {
    height: 0.72rem;
    width: 0.72rem;
    top: -0.32rem;
}
.details_bottom {
    margin: 0;
}
.details_bottom .a,
.toupiaocheer{
    /*width: calc((100% - 0.24rem) / 2);*/
    -moz-flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    height: 0.77rem;
    line-height: 0.77rem;
    font-size: 0.32rem;
    /*border: none!important;*/
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.16rem;
}
.details_bottom .a img,
.toupiaocheer img{
    width: 18px;
    height: 18px;
    margin: 0;
}
.details_bottom .a:first-child {
    margin-right: 0.24rem;
}
.toupiaocheer {
    //box-shadow: 0 0.04rem 0 0 rgba(0, 0, 0, 0.25);
    //font-size: 0.32rem;
    margin: 0.24rem auto;
}
.color-btn {
    border: 1px solid rgb(49, 202, 177); background: -webkit-linear-gradient(left, rgb(4, 187, 224), rgb(33, 236, 179));
    color: #fff;
}
.biaoti_ranking .van-notice-bar {
    font-size: 0.36rem;
}
</style>
